$(function() {
	var jsonData = {
		pModules: [{}]
	};

	var $phoneContent = $('#J_phoneContent');
	var $optsPanelContent = $('#J_optsPanelContent');
	var $currentCmpt;


	$phoneContent.on('click', '.J_cmpt', function() {
		selectOneCmpt($(this));
	});



	$('.J_addCmptBtn').on('click', function() {
		var $ths = $(this);

		addOneCmpt($ths.attr('cmpt-name'));
	});


	//添加一个组件
	function addOneCmpt(cmptName) {
		var $cmpt = $($('#J_' + cmptName + '_tmpl').html());
		var $opts = $($('#J_' + cmptName + 'Opts_tmpl').html());

		$phoneContent.append($cmpt);
		$optsPanelContent.html($opts);

		$('.J_cmpt').removeClass('cmptEle_selected');
		$cmpt.addClass('cmptEle_selected');

		addOneData($cmpt, $opts);

		$currentCmpt = $cmpt;


		//操作面板子组件初始化
		initOpts();

	}

	//构建并添加一个组件数据
	function addOneData($cmpt, $opts) {
		var cmptName = $cmpt.attr('cmpt-name');
		var uid = getUId();
		var obj = {
			uid: uid,
			name: cmptName,
			content: {
				dataset: {}
			}
		};

		$cmpt.attr('uid', uid);
		$opts.find('[mapping]').each(function(i, el) {
			var $el = $(el);
			var key = $el.attr('mapping');
			var val = '';
			var tagName = $el.get(0).tagName;


			if (tagName == 'INPUT') {
				val = $el.val();
			} else {
				val = $el.text();
			}

			obj.content.dataset[key] = val;
		})

		jsonData.pModules.push(obj);
	}


	//选中一个组件
	function selectOneCmpt($ths) {
		var $cmpt = $ths;
		var uid = $cmpt.attr('uid');
		var cmptName = $cmpt.attr('cmpt-name');
		var $opts = $($('#J_' + cmptName + 'Opts_tmpl').html());


		$('.J_cmpt').removeClass('cmptEle_selected');
		$cmpt.addClass('cmptEle_selected');
		$optsPanelContent.html($opts);

		$currentCmpt = $cmpt;

		//根据获取数据渲染操作面板
		var curCmptData = jsonData.pModules.getItem('uid', uid);
		var dataset = curCmptData.content.dataset;

		Object.keys(dataset).some(function(key) {
			var val = dataset[key];
			var $el = $opts.find('[mapping="' + key + '"]');
			var tagName = $el.get(0).tagName;

			if (tagName == 'INPUT') {
				$el.val(val);
			} else {
				$el.text(val);
			}

		});
	}


	//操作面板
	function initOpts() {
		initInput();
		initTimeInput();
	}

	function initInput() {
		$optsPanelContent.find('input').on('input', function() {
			var $input = $(this);
			var val = $input.val();
			var key = $input.attr('mapping');
			var uid = $currentCmpt.attr('uid');
			var $bind = $currentCmpt.find('[bind="' + key + '"]');
			var $dCell = $bind.attr('d-cell') !== undefined ? $bind : $bind.parents('[d-cell]');

			$bind.text(val);

			if ($dCell.length > 0) {
				if ($dCell.attr('empty-hide') !== undefined) {
					$dCell[val ? 'show' : 'hide']();
				}
			}

			//处理数据
			var curCmptData = jsonData.pModules.getItem('uid', uid);
			var dataset = curCmptData.content.dataset;
			dataset[key] = val;
		});
	}

	function initTimeInput() {
		var $timeInputs = $optsPanelContent.find('.J_timeIput');

		$timeInputs.each(function(i, el) {
			var $el = $(el);

			$el.datetimepicker({
				datepicker: false,
				format: 'H:i',
				value: $el.attr('init-time'),
				onSelectTime: function(date) {
					console.log(date.getHours())
				}
			});
		});
	}



	$('#picker').colpick({
		layout: 'hex',
		color: 'ffffff',
		colorScheme: 'light', //可选：light和dark。默认为light。
		submitTex: '确定',
		onSubmit: function(v) {
			console.log(v);
		}
	});



	/**
	 * 获取唯一id(6位)
	 */
	function getUId() {
		var str = new Date().getTime() + '';
		return str.substr(str.length - 7, 6);
	}

	/**
	 * 获取数组对象中的某个item
	 * @param  {} 数组中某个字段
	 * @param  {[type]} 数组中某个字段值
	 * @return {[type]}
	 */
	Array.prototype.getItem = function(key, val) {
		var curItem = null;

		this.some(function(item) {
			if (item[key] == val) {
				curItem = item;
				return true;
			}
		})

		return curItem;
	}

});